<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div id="head">
        <div id="head1">
            <p>SAS性格色彩</p>
            <p>你的焦虑测试</p>
        </div>
    </div>
    <div id="nav">最近30天测试：410313人</div>

    <!-- 选项 -->
    <div id="options">
        <!-- 进度条 开始 -->
        <div>
            <span id="curr">01</span>/
            <span id="totalnum">${allsub.total}</span>
        </div>
        <!-- 进度条 结束-->
        <div>
            <div></div>
        </div>
        <!-- 存放题目的 -->

         <div >
                <!-- 题目开始 -->
            <c:forEach items="${allsub.list}" var="s" varStatus="d">
               <span class="tm">
                <p>
                    <a>${s.tid}</a>、${s.question}
                </p>

                <!-- 选项开始 -->
                <div>
                    <!-- <input type="hidden" value="1" name="subid"/> -->
                    <span style="display: none;" name="subid">${s.tid}</span>
                    <ul class="xx">
                        
                        <li>${s.optionone}</li>
                        <li>${s.optiontwo}</li>
                        <li>${s.optionthree}</li>
                        <li>${s.optionfour}</li>

                    </ul>
                    <c:if test="${d.first}">
                        <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
                    </c:if>
                    <c:if test="${d.last}">
                        <input type="button" class="previousbutton" value="上一题" onclick="prevSub()"/>
                        <input type="button" class="nextbutton" value="提交" onclick="tijiao()"/>
                    </c:if>
                    <c:if test="${!d.first and !d.last}">
                        <div style="width: 500px">
                        <input type="button"  class="previousbutton" value="上一题" onclick="prevSub()"/>

<%--                            <a href="#" class="previousbutton" onclick="prevSub()">上一题</a>--%>
                            <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
<%--                            <a href="#" class="nextbutton"  onclick="nextSub()">下一题</a>--%>
                        </div>
                    </c:if>
<%--                    <c:if test="${!allsub.isLastPage and !allsub.isFirstPage}">--%>
<%--                        <input type="button" value="上一题" onclick="prevSub()"/>--%>
<%--                        <input type="button" value="下一题" onclick="nextSub()"/>--%>
<%--                    </c:if>--%>


                </div>
                <!-- 选项结束 -->
                </span>

             <!-- 题目结束 -->
            </c:forEach>
         </div>
        
        
    </div>
    <div id="bottom">
<%--        <div>--%>
<%--            <p>【完成测试，您将获得】</p>--%>
<%--            <div>--%>
<%--                <ul>--%>
<%--                    <li>测试介绍</li>--%>
<%--                    <li>四种性格简介</li>--%>
<%--                    <li>你的性格色彩测试结果</li>--%>
<%--                    <li>性格特点</li>--%>
<%--                    <li>行为特点</li>--%>
<%--                    <li>如何与之相处</li>--%>
<%--                </ul>--%>
<%--            </div>--%>
<%--            <p>--%>
<%--                南京未莱迪电子商务有限公司龙湾分公司--%>
<%--            </p>--%>
<%--        </div>--%>
    </div>
    
    <script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
    <script>


        var i =0;// 试题的索引 默认设置为0
        var j=1;// 进度条上的第几题
        var chackOption=[]; // 选中的数据
        // 获取试题的总数
        var totalsub=Number($("#totalnum").text());
        var recordid=localStorage.getItem("recordid");

        //
        function changeStyle(){
            localStorage.setItem("checkdata",JSON.stringify(chackOption));
            $(".tm").css("display","none");
            $(".tm")[i].style.display="block";
            changeBgColor();
        }

        $(function(){
            //localStorage.clear();// 清空localStorage里面的值
            changeStyle();// 只显示索引i对应的试题
            // 当点击选项的时候自动给切换到下一个题目
            $(".xx").children("li").click(function(){
                // 如果是最后一道题就不能点击了

                // 进度条的值加1

                //alert(j);
                if(j<totalsub){
                    j++;
                    changeJinduTiao("+");// 更改进度条  进度条+
                }
                // 将对那个的数据存到集合里面
                var checkobj={};
                // 获取当前的兄弟标签input
                var subid=$(this).parent(".xx").prev().text();// 获取试题的编号
                var answer=$(this).text().substr(0, 1);// 获取对应的答案
                 checkobj["sasno"]=subid;
                 checkobj["sasanswer"]=answer;
                 checkobj["recordid"]=recordid;
                 //alert(subid+"---"+answer+"===="+JSON.stringify(checkobj));
                 chackOption[i]=checkobj; // 将对应的试题和自己选择的答案放到chackOption中
                 $(".xx").children("li").css("background-color","");

                 $(this).css("background-color","orange");
                 //  相当于是后台里面的application    sessionlocalStorage
                // setItem("","")
                 localStorage.setItem("checkdata",JSON.stringify(chackOption));// 将chackOption中的值存放道localStorage中
                if(i==(totalsub-1)){
                    alert("已经是最后一道题了");
                    return ;

                }
                 i++;// 索引值加一


                changeStyle();// 更改显示的试题
            })
        })

        /**
         * 更改进度条
         */
        function changeJinduTiao(fh){

            if(j<10){
                $("#curr").html("0"+j);
            }else{
                $("#curr").html(j);
            }
            var oldwidth=$("#options div:nth-of-type(2) div").css("width").slice(0,-2);
            var newwidth=0;
            if(fh=='+'){
                newwidth=Number(oldwidth)+30.6
            }else{
                newwidth=Number(oldwidth)-30.6
            }

            $("#options div:nth-of-type(2) div").css("width",newwidth+"px");
        }

        /*
        *上一题的按钮
         */
        function prevSub(){

            i--;
            j--;
            changeJinduTiao("-");
            changeStyle();
            //changeBgColor();

        }
        /**
         * 下一题的按钮
         */

        function nextSub(){
            i++;
            j++;
            changeJinduTiao("+");
            changeStyle();
            // 更改背景颜色
            //changeBgColor();
        }

        /**
         * 更改背景颜色
         */
        function changeBgColor(){
            // 如果之前已经做过这个题目了就展示之前的结果  否则直接就展示下一题
            //集合中的数据拿出来并选中  之前已经选中的那个li
            var allData=JSON.parse(localStorage.getItem("checkdata"));
            var checkData=allData[i];

            if(checkData!='undefined'&&checkData!=null&&checkData!=''){
                var answer=checkData.sasanswer;
                var subid=checkData.sasno;
                // 找到答案为answer的选中
                //alert(answer);
                // 找到span的text为subid的然后显示
                var aaa=$($(".tm")[i]).children().find(".xx").children();
                aaa.each(item=>{
                    $(aaa[item]).css("background-color","");
                    // item是一个数字
                    var content=aaa[item].innerText;

                    var answer1=content.substr(0, 1);

                    if(answer==answer1){
                        $(aaa[item]).css("background-color","orange");
                    }
                })
            }
        }

        /**
         * 提交试题的记录
         */
        function tijiao(){
            // 将数据插入到数据库中
           var data= localStorage.getItem("checkdata");
           alert(data)
           // 判断是不是有空的  如果有空的就提示 需要做完题目
            var newData=JSON.parse(data);

            var notcheck=[];
            if(totalsub!=newData.length){

                        alert("题没有做完！！！");
                        return;
            }else{
                // 如果长度一样  里面有null 也提示题目没有做完
                newData.forEach(function (item,index){
                    if(item==null){
                        notcheck.push((index+1)+"");
                        // alert("第"+(index+1)+"题没有做完！！！");
                        // return;
                    }
                })
                if(notcheck.length!=0){
                    alert("您"+notcheck.toString()+"道题没有做！！！！");
                    return;
                }
            }
            //   如果传递到后台是一个json字符串
            //  contentType: 'application/json;charset=utf8',
            //
            $.ajax({
                url:"${pageContext.request.contextPath}/tSasRecordDedtail",
                type:"post",
                data:data,
                contentType: 'application/json;charset=utf8',
                success:function (d){
                    if(d.data==true){
                        localStorage.clear();// 清除localstorage中的值
                        window.location="${pageContext.request.contextPath}/sas/saslogin.jsp"
                    }
                }

            });
            //alert("提交到数据库！！！")
        }
    </script>
</body>
</html> 
